<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'

// const leftWidth = ref("800px")
const isShow = ref(true)
const shousuo = () => {
  // if (leftWidth.value == "800px") {
  //   leftWidth.value = "0px"
  // } else {
  //   leftWidth.value = "800px"
  // }
  isShow.value = !isShow.value
}

const isShow1 = ref(true)
const shouqi1=()=>{
  isShow1.value = !isShow1.value
}
</script>

<template>
  <div id="flex_contain">
    <el-button size="default" @click="shousuo" style="position: absolute;">收缩</el-button>
    <el-button type="primary" size="default" @click="shouqi1" style="position: absolute;margin-left: 720px;">第二个收起</el-button>


    <!-- <Transition name="expand"> -->
      <div id="contain_left" v-show="isShow">

      </div>
    <!-- </Transition> -->
    <div id="contain_right">
      <div id="one" v-show="isShow1"></div>
      <div id="two"></div>
    </div>
  </div>
</template>

<style lang='less' scoped>
#flex_contain {
  height: 100vh;
  display: flex;

  #contain_left {
    width: 400px;
    height: 100%;
    background-color: aqua;
    transition: all .3s;
  }

  #contain_right {
    height: 100%;
    flex: 1;
    border: 5px solid tomato;
    display: flex;

    #one {
      height: 100%;
      width: 200px;
      background-color: rgb(183, 191, 23);
    }

    #two {
      height: 100%;
      // width: 200px;
      flex: 1;
      background-color: rgb(168, 38, 38);
    }
  }

  // .expand-enter-active,
  // .expand-leave-active {
  //   transition: all 0.35s ease;
  // }

  // .expand-enter-from,
  // .expand-leave-to {
  //   width: 0px;
  //   // flex: 0;
  //   opacity: 0;
  // }

}
</style>